<template>
	<el-form
		ref="ruleForm"
		:model="ruleForm"
		label-width="100px"
		label-suffix=":"
		:inline="true"
	>
		<el-form-item
			:label="`${$t('dxn.card_ables_list.table_id')}`"
			prop="tableCode"
		>
			<el-input
				v-model="ruleForm.tableCode"
				v-symbols
				style="width: 210px"
				clearable
				:placeholder="
					`${$t('dxn.card_ables_list.table_id_placeholder')}`
				"
			></el-input>
		</el-form-item>
		<el-form-item
			:label="`${$t('dxn.card_ables_list.table_state')}`"
			prop="status"
		>
			<el-select
				v-model="ruleForm.status"
				clearable
				multiple
				style="width:220px"
				:placeholder="
					`${$t('dxn.card_ables_list.table_state_placeholder')}`
				"
			>
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				></el-option>
			</el-select>
		</el-form-item>

		<el-form-item
			:label="`${$t('dxn.card_ables_list.game_name')}`"
			prop="gameTypeIdList"
		>
			<el-select
				v-model="ruleForm.gameTypeIdList"
				clearable
				multiple
				style="width:220px"
				:placeholder="
					`${$t('dxn.card_ables_list.game_name_placeholder')}`
				"
			>
				<el-option
					v-for="item in gameList"
					:key="item.code"
					:label="item.description"
					:value="item.code"
				></el-option>
			</el-select>
		</el-form-item>
		<el-form-item
			:label="`${$t('dxn.card_ables_list.date_time')}`"
			prop="dateTime"
		>
			<el-date-picker
				v-model="ruleForm.dateTime"
				type="datetimerange"
				range-separator="-"
				:start-placeholder="$t('dxn.card_ables_list.start_time')"
				:end-placeholder="$t('dxn.card_ables_list.end_time')"
				format="yyyy-MM-dd HH:mm:ss"
				:picker-options="pickerShortcut2"
				:default-time="defaultTime"
				value-format="timestamp"
				align="right"
			></el-date-picker>
		</el-form-item>
		<el-form-item>
			<el-button
				type="primary"
				icon="el-icon-search"
				:disabled="disabledSearch"
				:loading="disabledSearch"
				@click="submitForm('ruleForm')"
			>
				{{ $t('dxn.card_ables_list.search') }}
			</el-button>
			<el-button
				icon="el-icon-refresh-right"
				@click="resetForm('ruleForm')"
			>
				{{ $t('dxn.card_ables_list.reset') }}
			</el-button>
			<el-button
				type="warning"
				icon="el-icon-download"
				:loading="exportBtnLoading"
				@click="exportExcel"
			>
				{{ $t('dxn.card_ables_list.export_excel') }}
			</el-button>
		</el-form-item>
	</el-form>
</template>
<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		value: {
			type: Object,
			default: () => {}
		},
		disabledSearch: {
			type: Boolean,
			default: false
		},
		exportBtnLoading: {
			type: Boolean,
			default: false
		},
		gameList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			ruleForm: {
				tableCode: '',
				gameTypeIdList: [],
				gameName: '',
				status: [],
				gameOvertime: '',
				bbSetting: '',
				bbDefaultCarry: '',
				complementLowerLimit: '',
				complementUpperLimit: '',
				gameTimes: '',
				gamePeopleNumbers: '',
				autoStartNumbers: '',
				rake: ''
			},
			options: [
				{
					value: 0,
					label: '未开始'
				},
				{
					value: 1,
					label: '进行中'
				},
				{
					value: 2,
					label: '已结束'
				}
			]
		}
	},
	watch: {
		value: {
			handler(val) {
				this.ruleForm = val
			},
			immediate: true,
			deep: true
		},
		ruleForm(val) {
			this.$emit('input', val)
		}
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$emit('submit', this.ruleForm)
				} else {
					return false
				}
			})
		},
		resetForm(formName) {
			this.$refs[formName].resetFields()
			this.$emit('reset', this.ruleForm)
		},
		exportExcel() {
			this.$emit('export', this.ruleForm)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-range-input {
	background: #fff;
}
// .container {
// 	.demo-ruleForm {
// 	}
// }
</style>
